<template>
	<view class="page-content-box">
		<!--顶部导航栏-->
		<view class="order-tab-bar">
			<scroll-view scroll-x class="uni-swiper-tab">
				<block v-for="(item,index) in tabBars" :key="index">
					<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
						{{item.name}}
						<view class="swiper-tab-line">
						</view>
					</view>
				</block>
				
			</scroll-view>
		</view>
		<view class="order-tab-content">
			<swiper :current="tabIndex" @change="tabChange" @animationfinish="tabAnimation" class="order-swiper" :circular="true">
				<swiper-item v-for="(item,index) in tabBars" :key="index" class="order-swiper-item">
					<scroll-view scroll-y @scrolltolower="loadingMore" style="height: 100%;">
						<view class="more-order-content" style="padding-bottom: 20rpx;box-sizing: border-box;">
							<view v-if="order_list.length==0 && hasload" class="no-data-box">
								<image mode="aspectFit" src="../../static/wushuju.png"></image>
								<view>暂无订单~</view>
							</view>
							<block v-for="(item,index) in order_list" :key="index">
								<view class="order-list">
									<view class="order-title flex-block-row">
										<view class="flex-2 time">
											下单时间：{{item.createdate}}
										</view>
										<view :class="'flex-1 text-right status-'+item.orderStatus">{{item.orderStatusText}}</view>
									</view>
									<view class="order-content-box flex-block-row">
										<view class="order-content flex-block-row">
											<view v-if="item.peopleCount" class="">用餐人数：{{item.peopleCount}}人</view>

										</view>
										<view class="all-cost-box">
											<view class="all-cost">￥{{item.amount}}</view><view class="num">{{item.waiterName}}</view>
										</view>
									</view>
									<view class="order-list-bottom flex-block-row">
										<view class="order-num flex-1 text-left">
											桌台：{{item.tableCode}}
										</view>
										<view v-if="item.orderStatus==1" class="addOrderBtn" @click="addOrderBtn(item)">
											加单
										</view>
										<view v-if="item.orderStatus==1" class="reduceOrderBtn" @click="reduceOrderBtn(item)">
											减单
										</view>
										<view v-if="item.orderStatus==2" class="">
											<button  class="bottom-btn bg-orange-btn" type="primary" @click="goEvaluate(item)">用餐体验反馈</button>
										</view>
										<view class="flex-1 text-right">
											<button class="bottom-btn bg-none-btn" type="primary" @click="goToDetail(item.icode)">查看详情</button>
											
											<!-- <button v-if="item.status==0" class="bottom-btn bg-cancel-btn" type="primary" @click="goToCancel(item.sub_order_number)">取消</button> -->
										</view>
									</view>
								</view>
							</block>
						</view>
						<view v-if="ishide" class="loader" style="padding-top: 0;">
							<view class="loader-inner ball-pulse">
							  <view></view>
							  <view></view>
							  <view></view>
							</view>
						</view>
						<view v-if="noMore" class="loading-more-text">暂无更多数据</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <toast></toast> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,	//选中标签栏的序列
				tabBars:[
					{
						name: '未结账',
						id: 1
					},
					{
						name: '已结账',
						id: 2
					},
					{
						name: '已取消',
						id: 3
					}
				],
				tabLoad:false,
				order_list:[],
				baseUrl:this.$client.IMG_URL,
				ishide:false,
				noMore:false,
				/* ishidetop:false, */
				hasload:false,
				pager:{
					page: 1,
					pageSize: 20,
					total: 0
				},
				userInfo:{}
			}
		},
		onLoad(options) {
			//console.log(options);
			this.pager.page = 1;
			this.order_list = [];
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#fda600'
			})
		},
		onShow(){
			if(uni.getStorageSync("userInfo")){
				console.log(uni.getStorageSync("userInfo"),"用户信息")
				this.userInfo = uni.getStorageSync("userInfo");
				
			}
			this.pager.page = 1;
			this.order_list = [];
			this.getInitData(this.tabBars[this.tabIndex].id);
		},
		methods: {
			getInitData(status){
				var _this = this;
				this.noMore = false;
				if(_this.pager.page==1){
					_this.$loading(); 
				}else{
					_this.ishide = true;
				}
				var params = {
					waiterId:this.userInfo.icode,
					orderStatus:status
				};
				var api = '';
				if(this.tabIndex == 0){
					
					api = '/api/biz/order/getListForAdmin';
				}else if(this.tabIndex == 1){
					
					api = '/api/biz/order/getListForAdmin';
				}else if(this.tabIndex == 2){
					
					api = '/api/biz/order/getListForAdmin';
				}
				this.hasload =false;
				params.pageNo = _this.pager.page;
				params.pageSize = _this.pager.pageSize;
				this.$client.get(api, params, function(res,message,total,totalPages){
					_this.hasload =true;
					//console.log(res);
					if(_this.pager.page==1){
						_this.$loading(false);
					}else{
						setTimeout(()=>{
							_this.ishide = false;		
						},1000)
					}
					_this.order_list = _this.order_list.concat(res)
					console.log(_this.order_list,"_this.order_list")
					_this.pager.page = totalPages;
					_this.pager.total = total;
				},function(res){
					_this.hasload =true;
					if(_this.pager.page==1){
						_this.$loading(false);
					}else{
						setTimeout(()=>{
							_this.ishide = false;		
						},1000)
					}
				},true);
			},
			toggleTab(index){
				//console.log(index);
				//console.log(id);
				this.tabIndex = index;
			},
			//滑动切换swiper
			tabChange(e){
				//console.log(e.detail)
				this.pager.page = 1;
				this.order_list = [];
				this.hasload = false;
				this.$loading(); 
				const tabIndex = e.detail.current;
				this.tabIndex = tabIndex;
				this.tabLoad = true;
			},
			tabAnimation(e){
				if(this.tabLoad){
					const tabIndex = e.detail.current;
					this.$loading(false);
					this.getInitData(this.tabBars[tabIndex].id);
					this.tabLoad = false;
				}
			},
			loadingMore(){
				if(this.order_list.length>=this.pager.total){
					/* this.ishide = true;
					setTimeout(()=>{
						this.ishide = false;	
						this.$util.showToast({title:'已经加载全部了'});
					},1500) */
					this.noMore = true;
				}else{
					this.pager.page++;
					this.getInitData(this.tabBars[this.tabIndex].id);
				}
			},
		
			
			goToDetail(icode){
				uni.navigateTo({
					url: "/pages/orderdetail/orderdetail?icode="+icode,
				})
			},
			goToCancel(sub_order_number){
				var _this = this;
				//console.log(id);
				uni.showLoading({
				    title: '加载中...'
				});
				this.$client.post('/api/order/canceldealorder', {sub_order_number:sub_order_number}, function(res,message){
					//console.log(res);
					uni.hideLoading();
					_this.$util.showToast({title:message});
					_this.pager.page = 1;
					_this.order_list = [];
					_this.getInitData(_this.tabBars[_this.tabIndex].id);
				},function(res){
					uni.hideLoading();
					if(res){
						_this.$util.showToast({title:res});
					}
				},true);
			},
			addOrderBtn(item){
				uni.navigateTo({
					url: "/pages/categorydetail/categorydetail?orderId="+item.icode+'&tableCode='+item.tableCode,
				})
			},
			reduceOrderBtn(item){
				uni.navigateTo({
					url: "/pages/categorydetail/reduceOrder?orderId="+item.icode+'&tableCode='+item.tableCode,
				})
			},
			goEvaluate(goodsList){
				var orderStr = JSON.stringify(goodsList);
				uni.navigateTo({
					url: "/pages/eval/eval?goodsList="+orderStr,
				})
			}
		},
		onPullDownRefresh() {
			this.pager.page = 1;
			this.order_list = [];
			this.getInitData(this.tabBars[this.tabIndex].id);
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style>
	.swiper-tab-list{
		width: 33%;
		color: #666;
		font-size:28rpx;
		font-weight:bold;
		color:rgba(255,255,255,.4);
		text-align: center;
	}
	.swiper-tab-list.active{
		color: #FFFFFF;
	}
	.order-tab-bar{
		background-color:#fda600;
	}
	.order-tab-bar .active .swiper-tab-line{
		margin: auto;
		width:40rpx;
		height:8rpx;
		background:#FFFFFF;
		border-radius:4rpx;
	}
	.uni-swiper-tab{
		border-bottom: none;
	}
	.order-tab-content{
		height: calc(100% - 100rpx);
	}
	.order-swiper {
		display: block;
		height: 100%;
	}
	.order-swiper-item {
		display: block;
		height: 100%;
		overflow-y: auto;
		background-color: #f6f6f6;
	}
	.more-list-content{
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.order-list{
		width: 100%;
		padding: 0 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.order-list+.order-list{
		margin-top: 20rpx;
	}
	.order-list .order-title{
		height: 70rpx;
		border-bottom: 1rpx solid rgba(238,238,238,1);
	}
	.order-list .order-title view{
		font-size:28rpx;
		color:rgba(22,22,22,1);
		line-height: 56rpx;
	}
	.order-list .order-title .time{
		color:rgba(22,22,22,1);
		font-weight: bold;
	}
	.order-list .order-title .time image{
		vertical-align: middle;
		margin-right: 10rpx;
		margin-top: -6rpx;
	}
	
	.order-list .order-title .status-0{
		font-weight:500;
		color:#fda600;
	}
	.order-list .order-title .status-9{
		font-weight:500;
		color:#FFC13B;
	}
	.order-list .order-title .status-10{
		font-weight:500;
		color:#999999;
	}
	.order-list .order-content-box{
		justify-content: flex-start;
	}
	.order-list .order-content{
		justify-content: flex-start;
		padding-top: 20rpx;
		overflow: hidden;
		flex: 4;
	}
	.order-list .img-box{
		width: 120rpx;
		margin-right: 20rpx;
	}
	.order-list .name-box{
		width: 530rpx;
	}
	.order-list .name-box .name{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:#241400;
		margin-bottom: 10rpx;
	}
	.order-list .name-box .num{
		font-size:24rpx;
		color:#999999;
	}
	.all-cost-box{
		text-align: right;
		padding-top: 4rpx;
		padding-bottom: 20rpx;
		flex: 1;
	}
	.all-cost-box .num{
		font-size:24rpx;
		color:#999;
		line-height: 30rpx;
	}
	.all-cost-box .all-cost{
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
	}
	.order-list-bottom{
		width:100%;
		padding-top: 10rpx;
		height: 60rpx;
		box-sizing: border-box;
		text-align: right;
	}
	.order-list-bottom .order-num{
		font-size:28rpx;
		color:rgba(153,153,153,1);
	}
	.order-list-bottom  .bottom-btn{
		width: auto;
		padding: 0 30rpx;
		height:60rpx;
		border:1rpx solid rgba(229,229,229,1);
		background:rgba(255,255,255,1);
		border-radius: 30px;
		line-height: 60rpx;
		font-size:24rpx;
		color:rgba(36,20,0,1);
		display: inline-block;
	}
	.order-list-bottom .bottom-btn+.bottom-btn{
		margin-left: 20rpx;
	}
	.order-list-bottom .bg-none-btn{
		color:rgba(22,22,22,1);
	}
	.order-list-bottom .bg-orange-btn{
		color:#fff;
		background: #fda600;
		border: none;
	}
	.order-list-bottom .bg-cancel-btn{
		color:#999999;
	}
	.addOrderBtn{
		color: crimson;
		border:2rpx solid crimson;
		
		border-radius: 10rpx;
		padding: 5rpx 20rpx;
	}
	.reduceOrderBtn{
		
		color: green;
		border:2rpx solid green;
		margin-left: 40rpx;
		border-radius: 10rpx;
		padding: 5rpx 20rpx;
	}
</style>
